<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>客户端渲染</title>
</head>
<body>
  <h1>客户端渲染</h1>
  <h2 id="subTitle"></h2>
  <ul id="list"></ul>

  <script>
    const subTitle = document.querySelector('#subTitle');
    subTitle.append('客户端渲染为什么不利于 SEO');

    const list = document.querySelector('#list');

    fetch('http://localhost:5000/data.json').then(async (response) => {
      const data = await response.json();
      const lisStr = data.posts.map(item => `<li>${item.title}</li>`).join('');
      list.innerHTML = lisStr;
    });
  </script>
</body>
</html>
